<template>
    <div class="mainbody">
        <el-container>
            <el-header height="150px" style="width: 100%;position: relative;">
                 <el-row>
                    <el-col :span="4" text-align="right">
                        <div @click="goToLogin" v-if="this.$root.userName == null || this.$root.userName == ''">请登录</div>
                        <div v-if = " this.$root.userName != null && this.$root.userName != '' ">你好!&nbsp;&nbsp;&nbsp;&nbsp;{{this.nickName}}</div>
                        <div>&nbsp;</div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="2"><div>&nbsp;</div></el-col>
                    <el-col :span="6">
                        <div class="grid-left bg-purple">
                            <div style="position:relative;color: #ff6633;">
                                <div style="position: absolute;height:75px;width: 100%;line-height:120px;font-size:24px;font-weight: 600;">购物系统</div>
                                <div style="position: absolute;height:75px;width: 100%;line-height:10px;top:75px;font-size: 18px;font-weight: 500;">gouwuxitong</div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div>&nbsp;&nbsp;</div>
                    </el-col>
                    <el-col :span="6" >
                        <div class="grid-right bg-purple">
                            <div>
                                <el-form>
                                    <el-form-item>
                                        <div style="position:relative;background-color:white;height: 38px; line-height: 38px;top:40px;border:1px solid #ff6633;border-radius:30px;border-width:2px;padding:3px">
                                        <el-row>
                                            <el-col :span="5">
                                                <el-select placeholder="宝贝" value=宝贝 >
                                                    <el-option label="商铺" value="shangpu">
                                                    </el-option>
                                                    <el-option label="天猫" value="tianmao">
                                                    </el-option>
                                                </el-select>
                                            </el-col>
                                            <el-col :span="15"><el-input v-model="searchVal"></el-input></el-col>
                                            <el-col :span="4">
                                                <el-button :round="true" type="warning" style="color:white;width: 70px; " @click="searchGoods">搜索</el-button>
                                            </el-col>
                                            </el-row>
                                        </div>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="2"><div>&nbsp;</div></el-col>
                </el-row> 
            </el-header>
            <el-main style="height: 100%;">
                <!-- 商品详情 -->
                <el-row>
                    <el-col :span="2">&nbsp;</el-col>
                    <el-col :span="20">
                        <div style="height:100%;background-color:white;border-radius: 30px;" position="relative">
                            <div height="60px">&nbsp;&nbsp;</div>
                            <div height="60px">&nbsp;&nbsp;</div>
                            <div style="top: 50px;"  position="relative">
                            <el-form>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item>
                                            <img :src="goodsmes.goodsImage" width="300px" height="300px" alt="图片为空">
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <div style="text-align: left;">
                                            <el-form-item>
                                                <h2>{{ goodsmes.goodsName }}</h2>
                                            </el-form-item>
                                            <el-form-item>
                                                <el-rate v-model="goodsRating" show-text>
                                                </el-rate>
                                            </el-form-item>
                                            <el-form-item>
                                                <el-input placeholder="请输入您的评论" v-model="goodsComment" style="width: 400px;"></el-input>
                                            </el-form-item>
                                            <el-form-item>
                                                <el-button type="primary" @click="CommentAdd">新增</el-button>
                                            </el-form-item>
                                        </div>
                                    </el-col>
                                </el-row>
                            </el-form>
                            </div>
                                <!-- 宝贝评价 -->
                            <el-row>
                                    <el-row style="position:relative;">
                                        <div>
                                            <h2 style="position:relative;text-align: left; left: 80px;top: 30px;overflow: hidden;line-height: 60px;">猜你喜欢</h2>
                                            <span style="position:relative;display:block; color:white;background-image: -webkit-linear-gradient(top, #f5ba61 0%, #d35a22 100%);width: 60px;height: 20px;line-height: 20px; font-size: 8px;border-radius: 10px;margin-left:180px;top: -25px;">个性推荐</span>
                                        </div>
                                        <el-col :span="6" v-for="(aa, index) in goodsList" :key="index"  style="position: relative;margin:20px 40px 20px 40px;">
                                        <el-card :body-style="{ padding: '0px' }">
                                                <img :src="aa.goodsImage"
                                                    class="image"  @click="goToGoodsPage(aa)">
                                                <div style=" padding: 14px;">
                                                    <span>{{aa.goodsName}}</span>
                                                    <div class="bottom clearfix">
                                                        <time class="time">{{ currentDate }}</time>
                                                        <el-button type="text" @click="goToGoodsPage(aa)">购买</el-button>
                                                        <el-button type="text" @click="addTrolley(aa)">加入购物车</el-button>
                                                    </div>
                                                </div>
                                            </el-card>
                                        </el-col>
                                    </el-row>
                            </el-row>
                        </div>
                    </el-col>
                    <el-col :span="2">&nbsp;</el-col>
                </el-row>
                
            </el-main>
            <el-footer>作者：咕嘟[gudoo]</el-footer>
        </el-container>
    </div>
</template>
  
  <script>
  import {login,userInfo,findGoodsAddress,findCommentByGoodsIdAndUserName,getGoodsById,getGoodsByRand } from "../ajax/get"
  import {addGoodsOrder,addComment,insertCartInfo} from "../ajax/post"
//   import defaultValue from "../utils/defalutValue"
  export default {
      name: "writeComment",
      data () {
          return {
            nickName: "", // 昵称
            userName:"",//用户名
            searchVal: "", // 搜索值
            goodsmes:{},//获取的商品信息对象
            value:12,//评论数量
            activeNames:[],
            goodsComment:"",//评论
            num:1,
            currentDate: this.toTimeFormate(new Date()),
            goodsList:[],//商品数据
            goodsRating:null,//评分指数
          };
      },
      methods: {
        goToLogin() {
            this.$router.push({
                path: '/shopLogin',
                query: {
                    path: 'ShoppingMall'
                }
            })
        },
        //添加购物车数据
        addTrolley(aa){
            let obj = {
                "createTime": "",
                "goodsAllPrice": aa.goodsPrice*aa.goodsInventoryCount,
                "goodsCount": aa.goodsInventoryCount,
                "goodsId": aa.id,
                "goodsImage": aa.goodsImage,
                "goodsName": aa.goodsName,
                "goodsPrice": aa.goodsPrice,
                "id":"",
                "updateTime": "",
                "userName":this.userName,
            }
            console.log("购物车:",aa);
            console.log("用户名:",this.userName);
            insertCartInfo(obj).then(res =>{
                console.log("购物车数据:",res);
                this.$message.error(res.data.msg);
            })
        },
        // 将日期格式转为yyyy-MM-dd HH:mm:ss
        toTimeFormate(date) {
            let Y = date.getFullYear();
            let M =
            date.getMonth() + 1 - 0 >= 10
                ? Number(date.getMonth()) + 1
                : "0" + (Number(date.getMonth()) + 1);
            let D = date.getDate();
            let h = date.getHours() >= 10 ? date.getHours() : "0" + date.getHours();
            let m =
            date.getMinutes() >= 10 ? date.getMinutes() : "0" + date.getMinutes();
            let s =
            date.getSeconds() >= 10 ? date.getSeconds() : "0" + date.getSeconds();
            return Y + "-" + M + "-" + D + " " + h + ":" + m + ":" + s;
        },
          // 查找用户信息
        findUserInfo(userName) {
            userInfo(userName).then(res => {
                console.log("用户信息:",res);
                this.nickName = res.data.data.nickName;
                this.userName = res.data.data.userName;
                // 获取“猜你喜欢”商品数据
                getGoodsByRand(3).then(like => {
                console.log("商品数据:",like);
                this.goodsList = like.data.data;
                console.log("赋值后的商品数据变量:",this.goodsList);
                })
                getGoodsById(this.$route.query.goodsId).then(mes =>{
                    console.log("获取的商品信息",mes);
                    this.goodsmes= mes.data.data;
                    console.log("获取的商品信息--",this.goodsmes);
                // })
                })
            })
        },
        //购买商品
        goToGoodsPage(goods){
            this.$router.push({
                path: '/goodsPage',
                query: {
                    goodsId: goods.id
                }
            })
        },
        // 搜索商品
        searchGoods() {
                let goodsName=this.searchVal;
                // this.goodsName=this.searchVal;
            searchGoodsByGoodsName(goodsName).then(res => {
                console.log("搜索商品:",res);
            })
        },
        //查找商品信息
        findGoods(){
            searchGoodsByGoodsName().then(res =>{
            console.log(res);
            let goodsInfor =res.data.data;
            console.log("获取的用户信息",goodsInfor)
          })
        },
        //新增评论方法
        CommentAdd(){
            let obj ={
                "createTime": "",
                "goodsComment": this.goodsComment,
                "goodsId": this.$route.query.goodsId,
                "goodsRating": this.goodsRating,
                "id": 0,
                "updateTime": "",
                "userName":sessionStorage.getItem("userName"),
            }
            addComment(obj).then (res =>{
                console.log(res);
            })
        },
      },
      created() {
        this.findUserInfo(sessionStorage.getItem("userName"));
        console.log("详情-评分",this.$route.query.goodsStatus);
        console.log("详情-商品id",this.$route.query.goodsId);
      }
  }
  </script>
  
  <style scoped>
.mainbody {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    text-align: center;
    position: relative;
    background: rgb(226, 219, 219);
    position: relative;
}

.el-header {
    background: white;
    width: 100%;
    overflow: hidden;
}

.el-footer{
    background: white;
    height: 100px;
    line-height: 100px;
}

.main-header{
    height: 75px;
    border-bottom: 1px solid rgb(237, 233, 233);
}

.CommentItem {
  top: 10px;
  /* margin-right: 40px; */
}
.fontColor{
    color: rgb(241, 85, 38);
}
  </style>